<template>
  <div class='container'>
    <!-- dialog对话框 -->
      <el-dialog @close="closeDialog" title="提示" :visible="dialogVisible" width="50%">
        <el-form
          :model="titleList"
          :rules="rules"
          ref="formdata"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 对话框--文章标题 input -->
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="titleList.title" placeholder="请输入文章标题"></el-input>
          </el-form-item>
          <!--对话框--文章内容 富文本  -->
          <el-form-item label="文章标题" prop="articleBody">
            <quillEditor v-model="titleList.articleBody" @change="validContent"></quillEditor>
          </el-form-item>
          <!-- 对话框--视频地址 -->
          <el-form-item label="视频地址" prop="videoURL">
            <el-input v-model="titleList.videoURL" placeholder="请输入视频地址"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"  @click="submit"
            >确 定</el-button
          >
          <!-- @click="dialogVisible = false" -->
        </span>
      </el-dialog>
  </div>
</template>

<script>
// 富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 富文本编辑器组件
import { quillEditor } from 'vue-quill-editor'
export default {
  components: { quillEditor }
}
</script>

<style scoped lang='less'></style>
